<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html {
      touch-action: none;
      font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
      ;
    }


    .content {
      box-sizing: border-box;

      display: flex;
      flex-wrap: wrap;
      width: 280px;
      border: 5px solid rgb(131, 103, 103);
      align-items: flex-start;

      gap: 10px;
    }

    .content>div {
      box-sizing: border-box;
      width: 60px;
      height: 60px;
      border: 1px solid rgb(131, 103, 103);
    }

    .container {
      display: grid;
      width: 400px;
      height: 500px;
      border: 5px solid #000;
      justify-content: center;
      align-content: center;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
      align-items: center;
    }

    .main {
      display: grid;
      width: 600px;
      height: 600px;
      border: 5px solid red;
      margin: 0 auto;
      /* justify-items: center;
        align-items: center; */
      /* grid-template-columns: repeat(auto-fill, 100px); */
      /* grid-template-columns: repeat(4, 1fr); */
      /* justify-content: space-between;
        align-content: space-between; */
      /* place-content: <align-content> <justify-content> 用于控制栅格的对齐方式 */
      /* place-items: <align-items> <justify-items> 控制所有元素的对齐方式， */

      grid-template-areas:
        'a a a'
        'b b b'
        'h g i';
      grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
      grid-template-rows: 100px 100px 100px;
      grid-template-rows: 100px 6.25rem;
      gap: 10px;
      grid-auto-columns: 50px;
      grid-auto-rows: 100px;
      grid-auto-flow: row dense;
      /* gap: 10px 0; */
      /* grid-template-columns: 25% 25% 25% 25%; */
      /* grid-template-rows:100px 100px 100px;
        /* grid-template-rows: repeat(auto-fill, 25%); */
      /* grid-template-columns: repeat(auto-fill, 25%); */
      /* grid-template-columns: repeat(4, 1fr); */
      /* grid-template-columns: repeat(3, 1fr); */
      /* gap: 10px; */
    }

    .item {
      font-size: 50px;
      color: white;
      text-align: center;
    }

    .item1 {
      background-color: #40407a;

      /* grid-column-start: 1;
        grid-column-end: 3; */
      /* grid-column: 1/3; */
      /* grid-column-start: span 3; */
      grid-area: b;
    }

    .item2 {
      background-color: #706fd3;
    }

    .item3 {
      background-color: #f7f1e3;
    }

    .item4 {
      background-color: #34ace0;
    }

    .item5 {
      background-color: #33d9b2;
    }

    .item6 {
      background-color: #ff5252;
    }

    .item7 {
      background-color: #ff793f;
    }

    .item8 {
      background-color: #ffb142;
    }

    .item9 {
      background-color: #84817a;
    }

    .item10 {
      background-color: #57606f;
    }

    nav {
      height: 60px;
      background-color: #ccc;
      text-align: center;
      line-height: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  </style>
</head>

<body>
  <!-- 1.使用 grid-template-columns 规则可划分列数，
      2. 使用 grid-template-rows 划分行数 -->

  <p>
    物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件，
    每个像素可以根据操作系统设置自己的颜色和亮度，所谓的一倍屏、二倍屏（Retina）、三倍屏，
    指的是设备以多少物理像素来显示一个CSS像素， 也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，
    在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
  </p>

  <p>
    CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确度量WEB页面上的内容， 一般情况下
    ，CSS像素称为与设备无关的像素（device-independent pixel）， 简称DIPs，CSS像素顾名思义就是我们写CSS时所用的像素；
  </p>

  <h1>css像素与设备独立像素(逻辑像素)的关系</h1>
  <p>缩放比例就是css像素边长/设备独立像素边长。</p>
  <p>在缩放比例为100%的情况下，一个css像素大小等于一个设备独立像素。</p>
  <br />
  <br />
  <br />
  <h1>css像素与设备像素(物理像素)的关系</h1>
  <p>
    devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率：一个 CSS
    像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。
    <br />
    window.devicePixelRatio设备像素比( 物理像素和设备独立像素的比例 )，devicePixelRatio =
    （在相同长度的直线上）设备像素的数量 / CSS像素的数量。 这个比例也等价于CSS像素边长/设备像素边长。
    如devicePixelRatio=2，表示在相同长度的直线上，设备像素的数量是CSS像素数量的2倍，因此CSS像素的边长是设备像素的2倍。
  </p>
  <p>缩放会导致CSS像素边长的改变，从而导致window.devicePixelRatio的改变！</p>
  <hr>




  <nav>导航</nav>
  <main class="main">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </main>
  <hr />
  <div class="container">
    <div>a</div>
    <div>b</div>
    <div>v</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
  </div>
  <hr />
  <h3>flex中的gap间距</h3>
  <div class="content">
    <div>a</div>
    <div>b</div>
    <div>v</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
  </div>
  <hr>

</body>
<script>
  // async function asyfn() {
  //   let p = new Promise((resolve, reject) => {
  //     console.log(999);
  //     resolve();
  //   }).then(() => console.log('promise'));
  //   console.log(789);
  //   console.log(p);
  // }

  // function as() {
  //   asyfn();
  //   console.log(77);
  // }
  // as();

  // executor
  // class Pro {
  //   status = 'pending';
  //   value = null;
  //   callbacks = [];
  //   constructor(executor) {
  //     try {
  //       console.log(this);
  //       executor(this.resolve, this.reject);
  //     } catch (error) { }
  //   }

  //   resolve(value) {
  //     console.log(this);
  //     if (this.status === 'pending') {
  //       console.log(value);
  //       this.status = 'resolve';
  //       this.value = value;
  //     }
  //   }
  //   reject(value) {
  //     if (this.status === 'pending') {
  //       this.status = 'reject';
  //       this.value = value;
  //     }
  //   }
  // }

  // new Pro((resolve, reject) => {
  //   resolve(777);
  // });
  // const debounce = (fn, ms = 100) => {
  //   let timeoutId;
  //   return function (...args) {
  //     if (timeoutId) clearTimeout(timeoutId);
  //     timeoutId = setTimeout(() => fn(args), ms);
  //   };
  // };
  // const inp = document.querySelector('input');
  // inp.oninput = debounce(function (e) {
  //   console.log('debounce', this);
  // });

  //   console.log(
  //     `%c
  // ......................我佛慈悲......................

  //                       _oo0oo_
  //                       o8888888o
  //                      88\\" . \\"88
  //                      (| -_- |)
  //                      0\\\\  =  /0
  //                    ___/‘---’\\\\___
  //                  .' \\\\|       |/ '.
  //                 / \\\\\\\\|||  :  |||// \\\\
  //                / _||||| -卍-|||||_ \\\\
  //               |   | \\\\\\\\\\\\  -  /// |   |
  //               | \\\\_|  ''\\\\---/''  |_/ |
  //               \\\\  .-\\\\__  '-'  ___/-. /
  //             ___'. .'  /--.--\\\\  '. .'___
  //          .\\"\\" ‘<  ‘.___\\\\_<|>_/___.’ >’ \\"\\".
  //         | | :  ‘- \\\\‘.;‘\\\\ _ /’;.’/ - ’ : | |
  //         \\\\  \\\\ ‘_.   \\\\_ __\\\\ /__ _/   .-’ /  /
  //     =====‘-.____‘.___ \\\\_____/___.-’___.-’======
  //                       ‘=---=’

  // ................佛祖开光，永无 BUG..................
  // `,
  //     `font-family: monospace;font-size: 16px`
  //   );



  console.log(
    '......................我佛慈悲......................\n\n' +
    '                      _ooOoo_\n' +
    '                     o8888888o\n' +
    '                     88" . "88\n' +
    '                     (| -_- |)\n' +
    '                     O\\  =  /O\n' +
    "                  ____/`---'\\____\n" +
    "                .'  \\|     |//  `.\n" +
    '               /  \\|||  :  |||//  \\\n' +
    '              /  _||||| -:- |||||-  \\\n' +
    '              |   | \\  -  /// |   |\n' +
    "              | \\_|  ''\\---/''  |   |\n" +
    '              \\  .-\\__  `-`  ___/-. /\n' +
    "             ___`. .'  /--.--\\  `. . __\n" +
    '          .',
    " '<  `.___\\_<|>_/___.'  >' ",
    '.\n' +
    '         | | :  `- \\`.;` _ /`;.`/ - ` : | |\n' +
    '         \\  \\ `-.   \\_ __\\ /__ _/   .-` /  /\n' +
    "     ======`-.____`-.___\\_____/___.-`____.-'======\n" +
    "                       `=---='" +
    '\n\n  ................佛祖开光，永无 BUG..................'
  );
  // 打印佛祖保佑 无 BUG图像
  console.log(
    '%c 请勿删除上面的注释，否则你将无法得到正确的 BUG 修复！',
    'color: red; font-size: 20px; font-weight: bold;'
  );

  // const obj = {
  //   a: 99,
  //   getA() {
  //     console.log('==this====>', this);
  //   },
  // };
  // const aaa = obj.getA
  // aaa()

  //   const fnBodyStr = `
  //   const result = a + b
  //   return result
  // `;


  const ccc = 'ccc'
  // 使用 new Function 动态创建函数
  const dynamicFn1 = new Function('a0', `
   console.log('dynamicFn1',a0)
   return function (p) {
    console.log(999,p,ccc)
   }`
  )
  const r1 = dynamicFn1(0)(1)
  console.log('===r1==>', r1)


  const dynamicFn2 = new Function('a2', 'b2', `
   console.log('dynamicFn2',ccc)
   return a2 + b2
  `
  )
  const r2 = dynamicFn2(1, 1)
  console.log('===r2==>', r2)

</script>

</html>